/**
 * copy from
 * https://facebook.github.io/react-native/docs/animatedvaluexy
 */

import React, { Component } from 'react';
import {
  View,
  Text,
  Image,
  Button,
  Animated,
  PanResponder,
} from 'react-native';

export default class DraggableView extends React.Component {

    constructor(props) {
      super(props);
      this.state = {
        pan: new Animated.ValueXY(), // inits to zero
      };
      this.state.panResponder = PanResponder.create({
        onStartShouldSetPanResponder: () => true,
        onPanResponderMove: Animated.event([
          null,
          {
            dx: this.state.pan.x, // x,y are Animated.Value
            dy: this.state.pan.y,
          },
        ]),
        onPanResponderRelease: () => {
          Animated.spring(
            this.state.pan, // Auto-multiplexed
            {toValue: {x: 0, y: 0}} // Back to zero
          ).start();
        },
      });
    }

    componentDidUpdate() {
      console.log('AAA-componentDidUpdate', this.state.pan.getLayout());
    }

    render() {
      console.log('AAA-render', this.state.pan.getLayout());
      
      return (
        <Animated.View onLayout={this.onLayout.bind(this)}
          {...this.state.panResponder.panHandlers}
          style={{...this.state.pan.getLayout(), backgroundColor: 'blue'}}>
          <Text>Hello Animated.View</Text>
          {this.props.children}
        </Animated.View>
      );
    }

    // 拖动时会多次触发此方法
    onLayout(e) {
        console.log('AAA-onLayout', e.nativeEvent);
    }

}
